<template>
    <div class="card">
        <div class="card-right" v-if="card.type == 1">
            <div class="top">{{ card.textTop }}</div>
            <div class="echart">
                <div ref="chart" style="width:100%; height:100%;"></div>
            </div>
        </div>
        <div class="card-right2" v-else-if="card.type == 2">
            <div class="top2">
                <div>{{ card.textTop }}</div>
                <div class="mid2">{{ card.textTip }}</div>
            </div>
            <div class="echart2">
                <div ref="chart2" style="width:100%; height:100%;"></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons'
const chart = ref(null);
const chart2 = ref(null);
const props = defineProps({
    card: Object
})
onMounted(() => {
    if (props.card?.type == 1) {
        setTimeout(() => {
			if(chart.value){
				const myChart = echarts.init(chart.value, 'macarons');
				const option = {
					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
					legend: {
						show: false,
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: []
						}
					],
					grid: {
						top: "0px",
						left: "0px",
						right: "0px",
						bottom: "0px"
					},
					yAxis: [
						{
							type: 'value',
							show: false
						}
					],
					series: [
						{
							name: 'Line 1',
							type: 'line',
							stack: 'Total',
							smooth: true,
							lineStyle: {
								width: 0
							},
							showSymbol: false,
							areaStyle: {
								opacity: 1,
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: '#ee6666'
									},
									{
										offset: 1,
										color: '#ee6666'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: props.card?.data
						}]
				}
				myChart.setOption(option);
			}
        }, 1000)
    } else if (props.card?.type == 2) {
        setTimeout(() => {
			if(chart2.value){
				const myChart2 = echarts.init(chart2.value, 'macarons');
				const option2 = {
					tooltip: {
						trigger: 'item',
						show: false
					},
					legend: {
						show: false,
					},
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: ['30%', '60%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: props.card?.data
						}
					]
				};
				myChart2.setOption(option2);
			}
        }, 3000)
    }
});

</script>
<style lang="scss" scoped>
.card:hover {
    box-shadow: 1px 1px 1px #555;
}

.card {
    border: solid 1px #ccc;
    box-shadow: 1px 1px 1px #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    color: #555;
    font-size: 14px;

    .card-left {
        width: 35px;
        height: 35px;
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;

        .img {
            width: 25px;
            height: 25px;
            display: inline-flex
        }
    }

    .card-right {
        width: 100%;
        height: 69px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3px 0;

        .mid {
            color: #000;
            font-size: 20px;
            font-weight: bold;
        }

        .echart {
            display: flex;
            height: 45px;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
    }

    .card-right2 {
        display: flex;
        width: 100%;
        height: 75px;
        line-height: 25px;
        padding-left: 15px;
        align-items: center;
        justify-content: space-between;

        .top2 {
            .mid2 {
                color: #000;
                font-size: 20px;
                font-weight: bold;
            }
        }

        .echart2 {
            display: flex;
            height: 100%;
            width: 100%;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
